<template>
	<view class="upload-mixed">
		<view v-if="images.length > 0" class="image-wrap" :style="{ padding: padding }">
			<move-box
				ref="moveBox"
				:list-data="images"
				:uploading="isUploading"
				:disabled="disabled"
				:long="false"
				:columns="3"
				@change="handleIndexChange"
				@remove="handleRemoveImg"
			></move-box>
		</view>
		<view v-if="!disabled || video.key" class="upload-wrap" :style="{ padding: padding }">
			<!-- <view v-if="video.key" class="upload-item" @click="previewVideo">
				<view class="upload-info">
					<view class="upload-box">
						<view class="video-cover">
							<image
								class="video-cover-image"
								:src="video.key | media('video')"
								mode="aspectFill"
							></image>
							<text
								v-if="!disabled"
								class="video-remove iconfont icon-close-circle-fill"
								@click.stop="handleRemoveVideo"
							></text>
							<view class="video-play-btn">
								<text class="iconfont icon-play"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="upload-item" @click="onVideosUpload">
				<view class="upload-info">
					<view class="upload-box">
						<view class="upload-btn">
							<text class="iconfont icon-video-add"></text>
							上传视频
						</view>
					</view>
				</view>
			</view> -->
			<view v-if="!disabled" class="upload-item" @click="onImgsUpload">
				<view class="upload-info">
					<view class="upload-box">
						<view class="upload-btn">
							<text class="iconfont icon-plus-square"></text>
							上传图片
						</view>
					</view>
				</view>
			</view>
		</view>
		<pys-video-player v-if="video.path" :src="video.path" ref="videoPlayer"></pys-video-player>
	</view>
</template>

<script>
import videoPlayer from '../video-player/video-player.vue';
import moveBox from '../move-box/move-box.vue';

export default {
	name: 'Upload',
	components: {
		videoPlayer,
		moveBox
	},
	props: {
		width: {
			type: [String, Number],
			default: ''
		},
		padding: {
			type: String,
			default: '12rpx 24rpx'
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isRequired: true,
			isUploading: false,
			images: [],
			video: {
				path: '',
				key: ''
			},
			indexList: []
		};
	},
	methods: {
		//上传图片
		onImgsUpload() {
			let count = 9;
			let lastCount = count - this.images.length;
			if (lastCount <= 0) {
				this.$g.toast('最多只能上传' + count + '张图');
				return false;
			}
			this.$http
				.urlImgUpload('file/upload', {
					count: lastCount,
					isDomain: false,
					isFactory: false,
					onBeforeUpdate: res => {
						console.log(res);
						this.isUploading = true;
						this.images.push({ path: res.path, status: 0, key: '', id: res.id });
						this.indexList.push(res.id);
					},
					onEachUpdate: res => {
						let index = this.images.findIndex(e => e.id === res.id);
						if (index >= 0) {
							this.images.splice(index, 1, { path: res.path, status: 1, key: res.key, id: res.id });
						}
					}
				})
				.then(res => {
					console.log(res);
					this.isUploading = false;
				})
				.catch(err => {
					this.isUploading = false;
				});
		},
		handleIndexChange(e) {
			this.indexList = e.map(item => item.id);
		},
		handleRemoveImg(e) {
			this.images.splice(e.oldKey, 1);
		},
		onVideosUpload() {
			this.isUploading = true;
			this.$http
				.urlVideoUpload('', {
					onBeforeUpdate: res => {
					},
					onEachUpdate: res => {
						this.video.path = res.path;
					},
					isLoad: true
				})
				.then(res => {
					this.isUploading = false;
					this.video.key = res[0].key;
				})
				.catch(err => {
					this.isUploading = false;
				});
		},
		previewVideo() {
			this.$refs['videoPlayer'].previewVideo(this.video.path);
		},
		handleRemoveVideo() {
			this.video = {
				path: '',
				key: ''
			};
		},
		getParams() {
			if (this.isUploading) {
				return { isUploading: true };
			}
			let result = {};
			console.log(this.images);
			if (this.images.length > 0 && this.indexList.length > 0) {
				result['images'] = this.indexList.map(id => {
					let temp = this.images.find(e => e.id === id);
					return temp.key;
				});
			} else {
				result['images'] = [];
			}
			if (this.video.key) {
				result['videos'] = [ this.video.key ];
			} else {
				result['videos'] = [];
			}
			return result;
		},
		setValue(value) {
			let images = [];
			for(let i in value.images) {
				let item = value.images[i];
				images.push({
					path: item.key,
					key: item.key,
					status: 1,
					id: 'i'+i
				});
			}
			this.images = images;
			this.indexList = images.map(e => e.id);
			this.video = value.video || { key: '', path: '' };
		},
		clear() {
			this.images = [];
			this.indexList = [];
			this.video = {
				path: '',
				key: ''
			};
			this.isUploading = false;
		}
	}
};
</script>
<style lang="scss" scoped>
.upload-mixed {
	background-color: #fff;
}

.image-wrap {
	border-top: 16rpx solid $bg-color;
}

.upload-wrap {
	border-top: 16rpx solid $bg-color;
	display: flex;
}
.upload-item {
	width: 33.33333333%;
}
.upload-info {
	position: relative;
	padding-top: 100%;
}
.upload-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 12rpx;
}

.upload-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 24rpx;
	font-size: 24rpx;
	line-height: 24rpx;
	color: #888;
	border: 1px solid #9c9c9c;

	.iconfont {
		font-size: 105rpx;
		line-height: 105rpx;
		color: #888;
		margin-bottom: 24rpx;
	}
}

.video-cover {
	position: relative;
	width: 100%;
	height: 100%;
	margin-right: 24rpx;

	&-image {
		width: 100%;
		height: 100%;
	}
	.video-remove {
		position: absolute;
		top: -12rpx;
		right: -12rpx;
		color: #ff536b;
		z-index: 3;
		font-size: 40rpx;
		line-height: 40rpx;
	}
	.video-play-btn {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba($color: #000000, $alpha: 0.1);
		
		.iconfont {
			font-size: 70rpx;
			color: #eee;
		}
	}
}

</style>
